<template>
    <div class="punchCardRecord">
        <el-dialog
        title="打卡记录"
        :visible.sync="cardRecordDialogVisible"
        width="75%"
        @open="getCardRecord()"
        :center="true"
        :before-close="backtrackItem">
        <el-button class="back" type="text" @click="backtrackItem">返回项目</el-button>
        <el-card class="card-box">
            <el-form>
                <el-form-item>
                    <el-input placeholder="员工姓名" v-model="queryData.userName" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-date-picker
                        v-model="queryData.printingDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期(年/月/日)">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button @click="handlerSeach">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="card-box">
            <el-table
            :data="recordList"
                border
                style="width: 100%">
                <el-table-column
                prop="userName"
                label="员工姓名"
                align="center">
                </el-table-column>
                <el-table-column
                prop="printingDate"
                label="打卡日期"
                align="center">
                </el-table-column>
                <el-table-column
                prop="clockTimeIn"
                align="center"
                label="上班打卡时间">
                </el-table-column>
                <el-table-column
                prop="locationPunchIn"
                align="center"
                label="上班打卡地点">
                </el-table-column>
                <el-table-column
                prop="timePunchOut"
                align="center"
                label="下班打卡时间">
                </el-table-column>
                <el-table-column
                prop="placePunchAfter"
                align="center"
                label="下班打卡地点">
                </el-table-column>
                <el-table-column
                prop="actualHour"
                align="center"
                label="实际上班工时/h">
                </el-table-column>
                <el-table-column
                prop="addedHours"
                align="center"
                label="加班工时/h">
                </el-table-column>
                <el-table-column
                prop="remark"
                align="center"
                label="备注">
                 </el-table-column>
                <el-table-column
                prop="state	"
                align="center"
                label="状态">
                <template slot-scope="scope">
                    <div v-show="scope.row.state == 0">正常</div>
                    <div v-show="scope.row.state == 1">调休</div>
                    <div v-show="scope.row.state == 2">请假</div>
                </template>
                 </el-table-column>
                <el-table-column
                align="center"
                label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handlerAdjustment(scope.$index, scope.row)">调整</el-button>
                </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <Pagination
                :total="total"
                :page.sync="queryData.pageNum"
                :limit.sync="queryData.pageSize"
                @pagination="getCardRecord"
            />
        </el-card>
        </el-dialog>
        <Adjustment
            :adjustmentDialogVisible="adjustmentDialogVisible"
            :adjustmentList="adjustmentList"
            @adjustmentCancel="adjustmentCancel"
            @confirmAdjustment="confirmAdjustment"            
        />
    </div>
</template>
<script>
// 导入接口文件
import {selectPunchingCard,adjustInformation} from '../../../../api/item'

import Pagination from '../../../../components/Pagination/index.vue'
import Adjustment from './components/adjustment.vue'
    export default{
        name:'PunchCardRecord',
        props:['cardRecordDialogVisible','mid'],
        components:{
            Adjustment,
            Pagination
        },
        data(){
           return{
            adjustmentDialogVisible:false,
            value1:'',
            recordList:[],
            adjustmentList:{},
            total:0, //总条数
               queryData:{
                   pageNum:1, //当前显示多少数据
                    pageSize:8,	// 当前页
                    userName:'',  //员工名称
                    printingDate:'', //选择日期
                    projectId:0
               },
           }
        },
        methods:{
            // 获取员工打卡信息
            getCardRecord(){
                this.queryData.projectId = this.$store.state['item/mid']
                selectPunchingCard(this.queryData).then(res=>{
                    this.total = res.data.total  //总条数
                    this.queryData.pageNum = res.data.current   //当前页
                    this.queryData.pageSize = res.data.size  //每页显示条数
                    this.recordList = res.data.records
                })
            },
            handlerSeach(){
                this.getCardRecord()
            },
            // 返回按钮
            backtrackItem(){
                this.$emit('backtrackItem',false)
            },
            // 打开调整弹窗按钮
            handlerAdjustment(index,row){
                this.adjustmentDialogVisible = true
                this.adjustmentList = Object.assign({},row)
                this.adjustmentList.index = index
            },
            // 取消调整按钮
            adjustmentCancel(valFalse){
                this.adjustmentDialogVisible = valFalse
            },
            // 确认调整按钮
            confirmAdjustment(valFalse){
                let adjustInformationDto = {
                    clockTimeIn : this.adjustmentList.clockTimeIn,
                    id : this.adjustmentList.id,
                    remark : this.adjustmentList.remark,
                    state : this.adjustmentList.state,
                    timePunchOut : this.adjustmentList.timePunchOut
                }
                adjustInformation(adjustInformationDto).then(res=>{
                    this.getCardRecord()
                })
                this.adjustmentDialogVisible = valFalse
            }
        },
    }
</script>
<style lang="scss" scoped>
    .back{
        position: relative;
        bottom: 50px;
    }
    .el-input{
        width: 250px;
    }
    .el-form{
        display: flex;
        justify-content: space-evenly;
    }
    .el-card{
        margin: 20px;
    }
</style>